<template>
	<view class="order-list">
		<view class="order-item">
			<view class="order-item-box">
				<view class="user-cert">
					<u-form :model="formModel" ref="uForm">
						<u-form-item :label-width="110" :label="item.name" v-for="(item,idx) in formArr" :key="idx"
							:required="item.is_must?true:false">

							<u-input v-model="item.user_val" v-if="['text','textarea'].indexOf(item.type) > -1"
								:placeholder="$zhTran('请填写')+item.name" :type="item.type"
								:maxlength="item.area_limit" />

							<view v-if="item.type=='select'">
								<u-input v-model="item.user_val" type="select"
									@click="selectChoose(item.value_select,idx)"
									:placeholder="$zhTran('请选择')+item.name" />
							</view>

							<u-checkbox-group @change="boxChange($event,idx)" v-if="item.type=='checkbox'">
								<u-checkbox v-model="arr.checked" v-for="(arr, index) in item.value_check" :key="index"
									:name="arr.name">
									{{ arr.name }}
								</u-checkbox>
							</u-checkbox-group>

							<u-radio-group v-model="item.user_val" v-if="item.type=='radio'">
								<u-radio v-for="(arr, oidx) in item.value_radio" :key="oidx" :name="arr.name"
									:disabled="arr.disabled">
									{{ arr.name }}
								</u-radio>
							</u-radio-group>

							<view class="m-t-24 bg-white p-24" v-if="item.type=='file'">
								<uploader v-model="item.user_image" :deletable="true" preview-size="160rpx"
									:maxUpload="item.file_count" image-fit="aspectFill" :maxSize="item.file_size" />
							</view>
						</u-form-item>
					</u-form>
					<u-select v-model="selectShow" :confirm-color="themeColor" cancel-color="#999"
						@confirm="valueChange($event)" :list="value_select"></u-select>
					<u-button @click="submit" type="primary">{{$zhTran('提交')}}</u-button>

				</view>
			</view>
			<w-jishuzhichi class="jishuzhichi-nodata" />
		</view>

	</view>
</template>

<script type="text/javascript">
	import {
		apiCertificationList,
		apiApplyCertification
	} from '@/api/user'
	export default {
		name: "UserCert",
		data() {
			return {
				formArr: [],
				formModel: {},
				value_select: [],
				value_idx: '',
				selectShow: false,
			};
		},
		methods: {
			selectChoose(data, idx) {
				this.value_idx = idx
				this.value_select = data
				this.selectShow = true
			},
			valueChange(e, idx) {
				this.formArr[idx].user_val = e[0].label
			},
			boxChange(e, idx) {
				this.formArr[idx].user_val = e.join(',')
			},
			submit() {
				var error_text = ''
				this.formArr.forEach((item, idx) => {
					if (item.is_must && error_text == '') {
						if (item.type == 'file') {
							if (item.user_image.length == 0) {
								error_text = this.$zhTran('请上传') + item.name
								return false
							}
						} else if (['select', 'checked', 'raiod'].indexOf(item.type) > -1) {
							if (item.user_val == '') {
								error_text = this.$zhTran('请选择') + item.name
								return false
							}
						} else {
							if (item.user_val == '') {
								error_text = this.$zhTran('请填写') + item.name
								return false
							}
						}
					}
				})
				if (error_text != '') {
					uni.showModal({
						content: error_text,
						confirmColor: this.themeColor,
						confirmText: this.$zhTran('确定'),
						showCancel: false
					})
					return false
				}

				apiApplyCertification({
					data: this.formArr
				}).then((res) => {
					this.$Router.replaceAll({
						path: '/pages/user/user'
					})
				}).catch(err => {})
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			apiCertificationList().then((res) => {
				this.formArr = this.$zhTran(res)
			}).catch(err => {})
		},
		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		padding: 0;
	}

	.order-list {
		height: 100%;
		display: flex;
		flex-direction: column;

		.order-item {
			flex: 1;
			min-height: 0;

			.order-item-box {
				height: calc(100% - constant(safe-area-inset-bottom));
				height: calc(100% - env(safe-area-inset-bottom));
				overflow: hidden;
				overflow-y: auto;
				padding: 20rpx;

				.user-cert {
					background-color: #fff;
					padding: 20rpx;
				}
			}
		}
	}
</style>